<script lang="ts" setup>
import { reactive, ref, nextTick } from 'vue'
import type { FormProps } from 'element-plus'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'


const labelPosition = ref<FormProps['labelPosition']>('right')
// const value = ref('')
const formRef = ref()
const formLabelAlign: any = ref({
    uname: '',
    pwd: '',
    res_type: '',
    c_id: ""
})

const resetForm = () => {
    // Object.keys() 用于获取对象的所有键名
    // Object.keys(formLabelAlign.value).forEach(key => {
    //     formLabelAlign.value[key] = ''; // 将每个键的值重置为空字符串
    // })
    formRef.value.resetFields()
    formLabelAlign.value.c_id = ""
    // formRef.value.clearValidate()
}


const options = ref([
    {
        value: "2",
        label: "出售",
    },
    {
        value: "1",
        label: "出租",
    }
])

const rules = {
    uname: [
        { required: true, message: '请输入591账号', trigger: 'blur' },
        // {
        //     pattern: /^\S{1,10}$/,
        //     message: '分类名必须是 1-10 位的非空字符',
        //     trigger: 'blur'
        // }
    ],
    pwd: [
        { required: true, message: '请输入591密码', trigger: 'blur' },
        // {
        //     pattern: /^[a-zA-Z0-9]{1,15}$/,
        //     message: '分类名必须是 1-15 位的字母或数字',
        //     trigger: 'blur'
        // }
    ],
    res_type: [
        { required: true, message: '请选择刊登类型', trigger: 'change' },
        // {
        //     pattern: /^[a-zA-Z0-9]{1,15}$/,
        //     message: '分类名必须是 1-15 位的字母或数字',
        //     trigger: 'blur'
        // }
    ],
    c_id: [
        { required: true, message: '请输入所关联的社区', trigger: 'blur' },
        // {
        //     pattern: /^[a-zA-Z0-9]{1,15}$/,
        //     message: '分类名必须是 1-15 位的字母或数字',
        //     trigger: 'blur'
        // }
    ]
}


const houseAdd = async () => {
    console.log(formLabelAlign);
    if (!formRef.value) return;
    try {
        await formRef.value.validate()
        ElMessage.closeAll()

        let formData = new FormData();
        for (let key in formLabelAlign.value) {
            if (formLabelAlign.value.hasOwnProperty(key)) {
                formData.append(key, formLabelAlign.value[key]);
            }
        }



        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })

        axios.post("create_sale_vue/", formData)
            .then((res: any) => {
                console.log(formLabelAlign.value.res_type);
                console.log(typeof formLabelAlign.value.res_type);

                loading.close()
                ElMessage({
                    message: res.data.message,
                    type: 'success',
                    showClose: true,
                    duration: 0
                })

                // resetForm()

                // if (formLabelAlign.value.res_type === "2") {
                //     console.log("进来了");

                //     ElMessage({
                //         message: res.data.fourStep,
                //         type: 'success',
                //         duration: 0,
                //         showClose: true,
                //     })
                // }
            })
            .catch((error: any) => {
                loading.close()
                ElMessage({
                    message: '刊登失败， 重试一下看看~~~',
                    type: 'error',
                })
                console.error(error);
            });

    } catch (error) {

    }

}


</script>

<!-- f -->
<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span style="color: #ffffff;">591中古屋刊登</span>
            </div>
        </template>
        <el-row>
            <el-col :span="24">
                <div class="grid-content ep-bg-purple-dark" />
                <div id="desc">注：会自动充值金额！！！刊登完会在会员中心--物件管理--开启中的物件列表显示（每个账号30s内限制刊登一次）</div>
                <div style="text-align: center; color: red;">注：刊登后可获取到<i style="color: #f77656;">“刊登第四步”</i>的链接地址，可直接访问
                </div>
            </el-col>
        </el-row>

        <el-row style="margin-top: 30px;">
            <el-col :span="8" :offset="8">
                <el-form :label-position="labelPosition" label-width="200px" ref="formRef" :model="formLabelAlign"
                    :rules="rules" style="max-width: 100%">
                    <el-form-item label="591手机号：" prop="uname">
                        <el-input v-model="formLabelAlign.uname" />
                    </el-form-item>
                    <el-form-item label="591密码：" prop="pwd">
                        <el-input v-model="formLabelAlign.pwd" />
                    </el-form-item>
                    <el-form-item label="刊登类型：" prop="res_type">
                        <!-- <el-input v-model="formLabelAlign.res_type" /> -->
                        <el-select v-model="formLabelAlign.res_type" class="m-2" placeholder="请选择刊登类型"
                            style="width: 400px;">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>


                    </el-form-item>
                    <el-form-item label="需要关联的社区：" prop="c_id">
                        <el-input v-model="formLabelAlign.c_id" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click.prevent="houseAdd">去刊登物件</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>

<style scoped>
#desc {
    color: red;
    text-align: center;
}

.box-card {
    min-height: 100vh;
    /* 或者一个足够容纳所有内容的固定值 */
}

/* .el-form {
    width: 100%;
} */

/* .box-card { */
/* overflow: auto; */
/* 添加滚动条，但只限于卡片内容 */
/* max-height: 100vh; */
/* 可以限制最大高度 */
/* } */

/* .el-input {
    width: 500px;
} */
</style>